<template>
  <div class="main_body">
    <swiper></swiper>
    <div class="recommend container">
      <div v-for="(item, index) in rec" :key="index">
        <img :src="item" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from "./components/Swiper.vue";
import { getPicture } from "../../services/swiper";
export default {
  components: {
    Swiper,
  },
  data() {
    return {
      rec: [],
    };
  },
  methods: {
    async getRecPicture() {
      const res = await getPicture({
        project_id: "132",
        site_id: "173",
      });
      res.data.result.forEach((item) => {
        this.rec.push(item.s_photos[0].path);
      });
    },
  },
  created() {
    this.getRecPicture();
  },
};
</script>

<style scoped lang="scss">
.main_body {
  background-color: #f5f5f5;
  .recommend {
    display: flex;
    justify-content: space-between;
    margin-top: 7px;
    div {
      width: 291px;
      height: 280px;
      cursor: pointer;
      overflow: hidden;
      &:hover img {
        transform: scale(1.1);
      }
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform-origin: center center;
        transition: all .5s;
      }
    }
  }
}
</style>
